Nota: Este documento es parte de una traducci�n al castellano de la Recomendaci�n del W3C "HTML 4.01 Specification" (m�s informaci�n). Puede consultar la versi�n original del mismo. Para cualquier comentario o correcci�n acerca de la traducci�n p�ngase en contacto con el traductor en jrpozo arroba conclase punto net. Gracias por su colaboraci�n.
V�ase el Aviso de copyright de la traducci�n.
Contenidos
Las hojas de estilo representan un avance importante para los dise�adores de p�ginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus p�ginas. En los entornos cient�ficos en que la Web fue concebida, la gente estaba m�s preocupada por el contenido de sus p�ginas que por su presentaci�n. A medida que la Web era descubierta por un espectro mayor de personas de distintas procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustraci�n, y los autores se vieron forzados a superar las limitaciones estil�sticas del HTML. Aunque las intenciones han sido buenas -- mejorar la presentaci�n de las p�ginas web --, las t�cnicas para conseguirlo han tenido efectos secundarios negativos. Entre estas t�cnicas, que dan buenos resultados para algunas personas, algunas veces, pero no siempre ni para todas las personas, se incluyen:
Estas t�cnicas incrementan considerablemente la complejidad de las p�ginas web, ofrecen una flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las personas con discapacidades.
Las hojas de estilo resuelven estos problemas al mismo tiempo que reemplazan al limitado rango de mecanismos de presentaci�n del HTML. Con las hojas de estilo es m�s f�cil especificar la cantidad de espacio entre l�neas, el sangrado de las l�neas, los colores a utilizar para el texto y el fondo, el tama�o y estilo de las fuentes, y otros muchos detalles.
Por ejemplo, la siguiente hoja de estilo CSS (almacenada en el fichero "especial.css") hace que el color del texto de un p�rrafo sea verde ("green") y lo rodea de un borde rojo ("red") continuo ("solid"):
P.especial {
color : green;
border: solid red;
}
Los autores pueden vincular esta hoja de estilo a su documento fuente HTML con el elemento LINK:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con una hoja de estilo externa<TITLE>
<LINK href="especial.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<P class="especial">Este p�rrafo deber�a tener texto especial verde.
</BODY>
</HTML>
HTML 4 soporta las siguientes caracter�sticas de hojas de estilo:
Las hojas de estilo, en contraste, se aplican a medios o grupos de medios espec�ficos. Una hoja de estilo dise�ada para una pantalla puede ser aplicable para una salida impresa, pero es de poca utilidad para los navegadores basados en voz. Esta especificaci�n le permite definir categor�as generales de medios a los que es aplicable una hoja de estilo dada. Esto permite a los agentes de usuario evitar la descarga de hojas de estilo que no sean apropiadas. Los lenguajes de hojas de estilo pueden incluir caracter�sticas para describir dependencias del medio dentro de una misma hoja de estilo.
La propuesta actual resuelve estos problemas, pues permite a los autores incluir instrucciones de representaci�n dentro de cada elemento HTML. As�, la informaci�n de representaci�n siempre estar� disponible en el momento en que el agente de usuario quiera representar cada elemento.
En muchos casos los autores sacar�n partido de una hoja de estilo com�n a un grupo de documentos. En este caso, la distribuci�n de reglas de estilo a lo largo del documento conducir� a un rendimiento peor que si se usara una hoja de estilo vinculada, ya que para la mayor�a de los documentos la hoja de estilo ya estar� almacenada en la cach� local. La disponibilidad p�blica de hojas de estilo de calidad potenciar� este efecto.
Nota. La hoja de estilo por defecto del HTML 4 que se incluye en [CSS2] expresa la informaci�n de estilo por defecto generalmente aceptada para cada elemento. Los autores, as� como los implementadores, pueden encontrar en ella un recurso �til.
Los documentos HTML pueden contener reglas de hojas de estilo directamente, o bien pueden importar hojas de estilo.
Se puede usar cualquier lenguaje de hojas de estilo con HTML. Un lenguaje simple de hojas de estilo puede ser suficiente para la mayor�a de los usuarios, pero para otras necesidades m�s especializadas pueden ser apropiados otros lenguajes. Esta especificaci�n utiliza para los ejemplos el lenguaje de estilo llamado "Hojas de Estilo en Cascada" ("Cascading Style Sheets", [CSS1]), abreviado CSS.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Los autores deben especificar el lenguaje de hojas de estilo de la informaci�n de estilo asociada con un documento HTML.
Los autores deber�an usar el elemento META para especificar el lenguaje de hojas de estilo por defecto de un documento. Por ejemplo, para especificar que el valor por defecto es CSS, los autores deber�an poner la siguiente declaraci�n en la secci�n HEAD de sus documentos:
<META http-equiv="Content-Style-Type" content="text/css">
El lenguaje de hojas de estilo por defecto tambi�n puede ser establecido con encabezados HTTP. La declaraci�n META de arriba es equivalente al encabezado HTTP siguiente:
Content-Style-Type: text/css
Los agentes de usuario deber�an determinar el lenguaje de hojas de estilo por defecto de acuerdo con los siguientes pasos (ordenados de mayor a menor prioridad):
Los documentos que incluyan elementos que especifiquen el atributo style pero que no definan un lenguaje de hojas de estilo por defecto son incorrectos. Las herramientas de creaci�n deber�an generar informaci�n de lenguaje de hojas de estilo por defecto (normalmente una declaraci�n META) de modo que los agentes de usuario no tengan que atenerse al valor por defecto "text/css".
Definiciones de atributos
La sintaxis del valor del atributo style viene determinada por el lenguaje de hojas de estilo por defecto. Por ejemplo, para los estilos [[CSS2]] en l�nea, se usa la sintaxis de bloque de declaraciones descrita en la secci�n 4.1.8 (sin las llaves).
Este ejemplo CSS establece informaci�n sobre el color y el tama�o de la fuente del texto de un p�rrafo espec�fico.
<P style="font-size: 12pt; color: fuchsia">�No son maravillosas las hojas de estilo?
En CSS, las declaraciones de propiedades son de la forma "nombre : valor" y est�n separadas por un punto y coma.
Para especificar informaci�n de estilo en l�nea para m�s de un elemento, los autores deber�an usar el elemento STYLE. Para lograr una flexibilidad �ptima, los autores deber�an definir los estilos en hojas de estilo externas.
<!ELEMENT STYLE - - %StyleSheet -- informaci�n de estilo --> <!ATTLIST STYLE %i18n; -- lang, dir, para usar con title -- type %ContentType; #REQUIRED -- tipo de contenido del lenguaje de estilos -- media %MediaDesc; #IMPLIED -- dise�ado para usar con estos medios -- title %Text; #IMPLIED -- t�tulo consultivo -- >
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
Atributos definidos en otros lugares
El elemento STYLE permite a los autores poner reglas de hojas de estilo en la cabecera del documento. HTML permite cualquier n�mero de elementos STYLE en la secci�n HEAD de un documento.
Los agentes de usuario que no soporten hojas de estilo, o que no soporten el lenguaje de hojas de estilo utilizado por un elemento STYLE en particular, deben ocultar los contenidos del elemento STYLE. Es un error representar el contenido como parte del texto del documento. Algunos lenguajes de hojas de estilo soportan sintaxis para ocultar el contenido a agentes de usuarios no conformes.
La sintaxis de los datos de estilo depende del lenguaje de hojas de estilo.
Algunas implementaciones de hojas de estilo pueden permitir una gama m�s amplia de reglas en el elemento STYLE que en el atributo style. Por ejemplo, con CSS, pueden declararse reglas dentro de un elemento STYLE para:
Las reglas de precedencia y herencia de las reglas de estilo dependen del lenguaje de hojas de estilo.
La siguiente declaraci�n STYLE CSS pone un borde alrededor de todos los elementos H1 del documento y los centra en la p�gina.
<HEAD>
<STYLE type="text/css">
H1 {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
Para especificar que esta informaci�n de estilo s�lo deber�a aplicarse a los elementos H1 de una clase espec�fica, la modificamos como sigue:
<HEAD>
<STYLE type="text/css">
H1.miclase {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 est� afectado por nuestro estilo </H1>
<H1> Este no est� afectado por nuestro estilo </H1>
</BODY>
Finalmente, para limitar el alcance de la informaci�n de estilo a una sola aparici�n de H1, establecemos el atributo id:
<HEAD>
<STYLE type="text/css">
#miid {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="miclase"> Este H1 no est� afectado </H1>
<H1 id="miid"> Este H1 est� afectado por el estilo </H1>
<H1> Este H1 no est� afectado </H1>
</BODY>
Aunque se puede especificar informaci�n de estilo pr�cticamente para cualquier elemento, hay dos elementos, DIV y SPAN, que son particularmente �tiles en el sentido de que no imponen ning�n significado presentacional (aparte de la distinci�n en bloque/en l�nea). Combinados con hojas de estilo, estos elementos permiten a los usuarios extender el HTML indefinidamente, en especial si se utilizan junto con los atributos class e id.
En el siguiente ejemplo, utilizamos el elemento SPAN para especificar que el estilo de fuente de las primeras palabras de un p�rrafo sea versalitas ("small-caps").
<HEAD>
<STYLE type="text/css">
SPAN.ver-ex { font-variant: small-caps }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="ver-ex">Las primeras</SPAN> palabras
de este p�rrafo van en versalitas.
</BODY>
En el siguiente ejemplo, utilizamos el elemento DIV y el atributo class para establecer la justificaci�n del texto de una serie de p�rrafos que constituyen el abstracto de un art�culo cient�fico. Esta informaci�n de estilo podr�a reutilizarse para otras secciones de abstracto especificando el valor correspondiente del atributo class en cualquier otro lugar del documento.
<HEAD>
<STYLE type="text/css">
DIV.Abstracto { text-align: justify }
</STYLE>
</HEAD>
<BODY>
<DIV class="Abstracto">
<P>La gama de productos Gran Jefe es nuestra apuesta
para el a�o que viene. Este informe sienta las bases
para confrontar a Gran Jefe con los productos de la
competencia.
<P>Gran Jefe reemplaza a nuestra gama "Commander",
si bien �sta seguir� de momento en cat�logo.
</DIV>
</BODY>
HTML permite a los autores dise�ar documentos que saquen partido de las caracter�sticas de los medios en los que el documento vaya a ser representado (p.ej., pantallas gr�ficas, pantallas de televisi�n, dispositivos de mano, navegadores basados en voz, dispositivos t�ctiles Braille, etc.). Al especificar el atributo media, los autores permiten a los agentes de usuario cargar y aplicar las hojas de estilo de manera selectiva. Consulte la lista de descriptores de medios reconocidos.
Las siguientes declaraciones de ejemplo se aplican a elementos H1. Cuando se proyecten en una reuni�n de negocios, todos ellos aparecer�n en azul. Cuando se impriman, aparecer�n centrados.
<HEAD>
<STYLE type="text/css" media="projection">
H1 { color: blue }
</STYLE>
<STYLE type="text/css" media="print">
H1 { text-align: center }
</STYLE>
Este ejemplo a�ade efectos de sonido a los v�nculos para su uso en salidas por voz:
<STYLE type="text/css" media="aural">
A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
</STYLE>
</HEAD>
El control de medios es particularmente interesante cuando se aplica a hojas de estilo externas, ya que los agentes de usuario pueden ahorrar tiempo si obtienen de la red �nicamente aquellas hojas de estilo que se apliquen el dispositivo actual. Por ejemplo, los navegadores basados en voz pueden evitar la descarga de hojas de estilo dise�adas para la representaci�n visual. Ve�se la secci�n sobre cascadas dependientes del medio para m�s informaci�n.
Los autores pueden separar las hojas de estilo de los documentos HTML. Esto ofrece varias ventajas:
HTML permite a los autores asociar cualquier n�mero de hojas de estilo externas a un documento. El lenguaje de hojas de estilo define el modo en que interaccionan varias hojas de estilo (por ejemplo, las reglas de "cascada" de CSS).
Los autores pueden especificar cualquier n�mero de hojas de estilo mutuamente excluyentes llamadas hojas de estilo alternativas. Los usuarios pueden seleccionar su hoja favorita seg�n sus preferencias. Por ejemplo, un autor puede especificar una hoja de estilo dise�ada para pantallas peque�as y otra para usuarios con poca visi�n (p.ej., con fuentes grandes). Los agentes de usuario deber�an permitir a los usuarios seleccionar las hojas de estilo alternativas.
El autor puede especificar que una de las alternativas es una hoja de estilo preferente. Los agentes de usuario deber�an aplicar la hoja de estilo preferente del autor a menos que el usuario haya seleccionado una alternativa diferente.
Los autores pueden agrupar varias hojas de estilo alternativas (incluyendo las hojas de estilo preferentes del autor) bajo un nombre de estilo com�n. Cuando un usuario selecciona un nombre de estilo, el agente de usuario debe aplicar todas las hojas de estilo con ese nombre. Los agentes de usuario no deben aplicar hojas de estilo alternativas con un nombre de estilo diferente. La secci�n sobre especificaci�n de hojas de estilo externas explica c�mo dar un nombre a un grupo de hojas de estilo.
Los agentes de usuario deben respetar los descriptores de medios al aplicar cualquier hoja de estilo.
Los agentes de usuario tambi�n deber�an permitir a los usuarios deshabilitar completamente las hojas de estilo del autor, en cuyo caso el agente de usuario no deber�a aplicar ninguna hoja de estilo persistente ni alternativa.
Los autores especifican hojas de estilo externas mediante los siguientes atributos del elemento LINK:
Los agentes de usuario deber�an posibilitar a los usuarios ver la lista de estilos alternativos y escoger uno de ellos. Se recomienda que el nombre de cada opci�n sea el valor del atributo title.
En este ejemplo, especificamos en primer lugar una hoja de estilo persistente localizada en el fichero miestilo.css:
<LINK href="miestilo.css" rel="stylesheet" type="text/css">
Si establecemos el atributo title la convertimos en la hoja de estilo preferente del autor:
<LINK href="miestilo.css" title="compacto" rel="stylesheet" type="text/css">
Si a�adimos la palabra clave "alternate" al atributo rel la convertimos en una hoja de estilo alternativa:
<LINK href="miestilo.css" title="Medium" rel="alternate stylesheet" type="text/css">
Para m�s informaci�n sobre hojas de estilo externas, consulte la secci�n sobre v�nculos y hojas de estilo externas.
Los autores tambi�n pueden usar el elemento META para establecer la hoja de estilo preferente del documento. Por ejemplo, para especificar que la hoja de estilo preferente sea "compacto" (ver el ejemplo precedente), los autores pueden incluir la siguiente l�nea en el HEAD:
<META http-equiv="Default-Style" content="compacto">
La hoja de estilo preferente tambi�n se puede especificar mediante encabezados HTTP. La declaraci�n META precedente es equivalente a este encabezado HTTP:
Default-Style: "compacto"
Si hay dos o m�s declaraciones META o encabezados HTTP que especifiquen la hoja de estilo preferente, la que prevalece es la �ltima. A estos efectos, se considera que los encabezados HTTP aparecen antes que la secci�n HEAD del documento.
Si hay dos o m�s elementos LINK que especifiquen una hoja de estilo preferente, el que prevalece es el primero.
Las hojas de estilo preferentes especificadas con un elemento META o con encabezados HTTP prevalecen sobre las especificadas con el elemento LINK.
Los lenguajes de hojas de estilo en cascada, tales como CSS, permiten que se pueda combinar la informaci�n de varias fuentes. Sin embargo, no todos los lenguajes de hojas de estilo soportan la cascada. Para definir una cascada, los autores especifican una secuencia de elementos LINK y/o STYLE. La informaci�n de estilo se combina en cascada seg�n el orden en que aparecen los elementos en la secci�n HEAD.
Nota. Esta especificaci�n no especifica c�mo se combinan en cascada hojas de estilo de lenguajes de hojas de estilo distintos. Los autores deber�an evitar mezclar lenguajes de hojas de estilo.
En el siguiente ejemplo, especificamos dos hojas de estilo alternativas llamadas "compacto". Si el usuario selecciona el estilo "compacto", el agente de usuario debe aplicar ambas hojas de estilo externas, as� como la hoja de estilo persistente "comun.css". Si el usuario selecciona el estilo "tipos grandes", s�lo se aplicar�n la hoja de estilo alternativa "tgrandes.css" y "comun.css".
<LINK rel="alternate stylesheet" title="compacto"
href="peq-base.css" type="text/css">
<LINK rel="alternate stylesheet" title="compacto"
href="peq-extras.css" type="text/css">
<LINK rel="alternate stylesheet" title="tipos grandes"
href="tgrandes.css" type="text/css">
<LINK rel="stylesheet" href="comun.css" type="text/css">
Aqu� tenemos un ejemplo de cascada que incluye tanto al elemento LINK como al STYLE.
<LINK rel="stylesheet" href="empresa.css" type="text/css">
<LINK rel="stylesheet" href="informe.css" type="text/css">
<STYLE type="text/css">
p.especial { color: rgb(230, 100, 180) }
</STYLE>
Una cascada puede incluir hojas de estilo aplicables a medios diferentes. Tanto LINK como STYLE pueden usarse con el atributo media. El agente de usuario es por tanto responsable de filtrar aquellas hojas de estilo que no se apliquen al medio actual.
En el siguiente ejemplo, definimos un cascada en la cual se incluyen varias versiones de la hoja de estilo "empresa": una dise�ada para su impresi�n, otra para la pantalla y otra para navegadores basados en voz (�til, por ejemplo, para leer correo electr�nico en el coche). La hoja de estilo "informe" se aplica a todos los medios. La regla de color definida por el elemento STYLE se usa para impresoras y pantallas, pero no para la representaci�n auditiva.
<LINK rel="stylesheet" media="aural" href="empresa-aural.css" type="text/css">
<LINK rel="stylesheet" media="screen" href="empresa-screen.css" type="text/css">
<LINK rel="stylesheet" media="print" href="empresa-print.css" type="text/css">
<LINK rel="stylesheet" href="informe.css" type="text/css">
<STYLE media="screen, print" type="text/css">
p.especial { color: rgb(230, 100, 180) }
</STYLE>
Cuando el agente de usuario quiere representar un documento, necesita encontrar valores para las propiedades de estilo, p.ej., la familia tipogr�fica, el tama�o de fuente, la altura de l�nea, el color del texto, etc. El mecanismo exacto depende del lenguaje de la hoja de estilo, pero en general es v�lida la descripci�n siguiente:
Se utiliza el mecanismo de cascada cuando varias reglas de estilo se aplican directamente a un mismo elemento. El mecanismo permite al agente de usuario ordenar las reglas seg�n su especificidad para determinar la regla a aplicar. Si no encuentra ninguna regla, el siguiente paso depende de si la propiedad de estilo puede ser heredada o no. No todas las propiedades se heredan. Para estas propiedades el lenguaje de la hoja de estilo proporciona unos valores por defecto que son los que se usan cuando no hay reglas expl�citas para un elemento en particular.
Si la propiedad puede ser heredada, el agente de usuario examina el elemento contenedor inmediato para ver si hay alguna regla que se aplique a �l. Este proceso contin�a hasta que se encuentra alguna regla aplicable. Este mecanismo permite que las hojas de estilo puedan definirse de una manera compacta. Por ejemplo, los autores pueden especificar la familia tipogr�fica de todos los elementos contenidos en BODY con una sola regla que se aplique al elemento BODY.
Algunos lenguajes de hojas de estilo soportan sintaxis pensada para permitir a los autores ocultar el contenido de los elementos STYLE a los agentes de usuario no conformes.
Este ejemplo ilustra c�mo comentar en CSS el contenido de los elementos STYLE para asegurarse de que los agentes de usuario antiguos y no conformes no lo representar�n como texto.
<STYLE type="text/css">
<!--
H1 { color: red }
P { color: blue}
-->
</STYLE>
Esta secci�n s�lo se aplica a los agentes de usuario conformes con las versiones de HTTP que definan un campo de encabezado Link. Obs�rvese que HTTP 1.1, tal y como se define en [RFC2616], no incluye un campo de encabezado Link (ver secci�n 19.6.3).
Los administradores de servidores web pueden creer conveniente configurar un servidor de modo que una hoja de estilo se aplique a un grupo de p�ginas. El encabezado HTTP Link tiene el mismo efecto que un elemento LINK con los mismos atributos y valores. Varios encabezados Link corresponder�an a varios elementos LINK que aparecieran en el mismo orden. Por ejemplo,
Link: <http://www.acme.com/empresa.css>; REL=stylesheet
corresponde a:
<LINK rel="stylesheet" href="http://www.acme.com/empresa.css">
Es posible especificar varias hojas de estilo alternativas especificando varios encabezados Link, y a continuaci�n utilizar el atributo rel para determinar el estilo por defecto.
En el ejemplo siguiente, se aplica "compacto" por defecto, ya que omite la palabra clave "alternate" del atributo rel.
Link: <compacto.css>; rel="stylesheet"; title="compacto" Link: <tgrandes.css>; rel="alternate stylesheet"; title="tipos grandes"
Esto deber�a funcionar cuando se env�an documentos HTML por correo electr�nico. Algunos agentes de correo pueden alterar el orden de los encabezados de [RFC822]. Para evitar que esto afecte al orden de cascada de las hojas de estilo especificadas con encabezados Link, los autores pueden usar la concatenaci�n de encabezados para combinar varias apariciones del mismo campo de encabezado. Las comillas s�lo se necesitan si los valores de los atributos contienen alg�n espacio en blanco. Utilice entidades SGML para hacer referencia a caracteres que no se permitan en encabezados de HTML o de correo electr�nico, o que sean susceptibles de resultar afectados por el tr�nsito a lo largo de la red.
Los elementos LINK y META declarados impl�citamente por encabezados HTTP aparecen antes de cualquier elemento expl�cito LINK o META en el HEAD del documento.